/**
 * @file usermanagement/edit.js
 *  用户权限编辑详情
 * @author chnejie
 */
// import $ from 'jquery';
import React, {Component,PropTypes} from 'react';
import {connect} from 'dva';
import {routerRedux,withRouter } from 'dva/router';
import { Table,Pagination,Breadcrumb, Checkbox, Button, Row, Col } from 'antd';

import Search from '../../../components/common/Search';
import Tablelist from '../../../components/common/TableData';

import styles from './userPermission.less';

const CheckboxGroup = Checkbox.Group;
const options = [
	{ label: '查看权限', value: "READ" },
	{ label: '修改权限', value: "WRITE" },
];
let checkbox = []
const UserPermission =({dispatch, accoutuserper,location})=>{
	if(accoutuserper.status){
		const username = location.query.username
		const { pdtlist,page,searchName } = accoutuserper;
		console.log('UserPermission',accoutuserper)
		const columns = [
				{
					title: '产品Code',
					dataIndex: 'productCode',
					key: `${location.query.username}_productCode`,
				},
				{
					title: '产品名称',
					dataIndex: 'productName',
					key: 'productName',
				},
				{
					title: '产品类型',
					dataIndex: 'productTypeText',
					key: 'productTypeText',
				},
				{
					title: '产品类别',
					dataIndex: 'origProductTypeText',
					key: 'origProductTypeText',
				},
				{
					title: '操作权限',
					key: 'permission',
					render: (record) => {
						const showValue = [];
						showValue.push(record.productId,record.permission)
						if(record.permission == 'WRITE'){
							showValue.push('READ')
						}
						if(record.productId){
							return (
								<span>
									<CheckboxGroup options={options} defaultValue={showValue} onChange={onChange} />
								</span>
							)
						}
					}
				},
			];
			function onChange(checkedValues) {
			 const value = checkedValues
			 // value.splice(1,1)
				if(value[2] == 'WRITE'){
					value.push('READ')
				}
				if(value.length == 1){
					value.push('NONE')
				}
				if(value[1] == 'WRITE' && value.length == 2 ){
					value.splice(1,1)
					value.push('NONE')
				}
				if(value[2] == 'READ'){
					value.splice(1,1)
				}
				if(value.length == 4){
					value.splice(1,1)
				}
				checkbox = checkbox.filter((item)=>item[0] != value[0])
				checkbox.push(value)
			}
			function handleSubmit(e){
				const newobj=checkbox.map((item,i)=>({
					productId:item[0],
					permission:item[1]
				}))
				dispatch({
					type: 'accoutuserper/saveUsrsPermission',
					payload: {
						data:newobj,
						username
					}
				})
			}
			// 分页
			function onShowSizeChange(currentpage, pagesize) {
				if(searchName !==''){
					dispatch({
					type: 'accoutuserper/getUserpdtList',
						payload: {
							username,
							name:searchName,
							currentpage:1,
							pagesize
						}
					})
				}else{
					dispatch({
					type: 'accoutuserper/getUserpdtList',
						payload: {
							username,
							currentpage:1,
							pagesize
						}
					})
				}
				
			}
			function onChangecurrentpage(current,pagesize){
				if(searchName !==''){
					dispatch({
					type: 'accoutuserper/getUserpdtList',
					payload: {
						username,
						name:searchName,
						currentpage:current,
						pagesize:pagesize
					}
				})
				}else{
					dispatch({
					type: 'accoutuserper/getUserpdtList',
					payload: {
						username,
						currentpage:current,
						pagesize:pagesize
					}
				})
				}
				
			}
			function onFormQuery(Values) {
				const name = Values.values;
				
				if(name){
					dispatch({
						type:'accoutuserper/changeState',
						payload:{
							searchName:name.keyname,
						}
					})
					dispatch({
						type: 'accoutuserper/changeRoute',
						payload: {
							pagesize:15,
							currentpage:1,
							name:name.keyname,
							username:username
						}
					})
				}else{
					if(name == undefined){
						dispatch({
						type:'accoutuserper/changeRoute',
						payload:{
							pagesize:15,
							currentpage:1,
							username:username,
							name:''
						}
					})
					}
				}
			}
			function handleBacktrack(){
				dispatch(routerRedux.push({
					pathname:`/systemMgt/accountMgt/userMgt?name=${username}`,
				}))
			}
		return (
				<div>
					<div className={styles.breaddiv}>
						<Breadcrumb separator=">">
							<Breadcrumb.Item onClick={handleBacktrack} className={styles.breadcr}>用户管理</Breadcrumb.Item>
							<Breadcrumb.Item >{`设置${username}的产品权限`}</Breadcrumb.Item>
						</Breadcrumb>
					</div>
					<div className="page-pdt-home content-inner">
						<div className={styles.searchcolumn}>
							<Row className={styles.searchRow} type="flex" justify="start">
								<Col>
									<Search
										buttonText="查询"
										onQuery={onFormQuery}
									/>
								</Col>
							</Row>
						</div>
						<Tablelist
							columns={columns}
							data={pdtlist}
							page={page}
							onShowSizeChange={onShowSizeChange}
							onChangecurrentpage={onChangecurrentpage}
							record={record => record.productId}
							className={styles.pagination}
						/>
						<Row type="flex" justify="end" className={styles.buttonstyle}>
							<Col span={4} pull={0}>
								<Button type="primary" size="large" onClick={handleSubmit} >保存</Button>
							</Col>
							<Col span={4} push={0}>
								<Button type="primary" size="large" onClick={handleBacktrack} >取消</Button>
							</Col>
						</Row>
					</div>

				</div>
		)
	}else {
		return null
	}

}

UserPermission.propTypes = {
}

export default connect(({accoutuserper})=>({accoutuserper}))(UserPermission)
